<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({ isVisible: Boolean });
const emit = defineEmits(['close']);
</script>

<template>
  <div v-show="isVisible" class="pause-mask" @click="emit('close')">
    <div class="pause-box" @click.stop>
      <h3>游戏已暂停</h3>
      <p>点击屏幕任意位置或按下ESC键继续游戏</p>
    </div>
  </div>
</template>

<style scoped>
.pause-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}
.pause-box {
  background: white;
  padding: 30px 50px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  text-align: center;
}
.pause-box h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}
.pause-box p {
  color: #666;
  margin: 0;
}
</style>